<style lang="scss">
  @import "../../styles/base";

  .container {
    background-color: #fece00;
    height: 100vh;
    overflow: hidden;
    .form-ssid {
      padding: pxToRem(10);
      @include middle-center-x();
      top: pxToRem(150);
      width: pxToRem(600);
      height: pxToRem(120);
      line-height: pxToRem(120);
      background-color: #fff;
    }
    .btn-test {
      @include middle-center-x();
      top: pxToRem(400);
      width: pxToRem(600);
      height: pxToRem(120);
      line-height: pxToRem(120);
      background-color: $mall-red;
      color: #fff;
      text-align: center;
    }
    .bg-img {
      display: block;
      width: pxToRem(1125);
      height: pxToRem(1923);
    }
    .banner-list-wrap {
      @include middle-center-x();
      top: pxToRem(35);
      .border {
        position: absolute;
        bottom: pxToRem(8);
        width: pxToRem(145);
        height: pxToRem(51);
        transform: translateY(100%);
        z-index: 100;
        &.left {
          left: pxToRem(114);
        }
        &.right {
          right: pxToRem(114);
        }
        &.center {
          left: 50%;
          transform: translate(-50%, 100%);
        }
      }
      .banner-list {
        width: pxToRem(1074);
        height: pxToRem(1065);
        border-radius: pxToRem(40);
        z-index: 100;
        box-sizing: border-box;
        overflow: hidden;
      }
      .banner-wrap {
        position: relative;
        height: pxToRem(1062);
        .body {
          overflow: hidden;
          border-radius: pxToRem(40);
          background-color: #fff;
          padding: pxToRem(30);
          width: pxToRem(1074);
          height: pxToRem(1062);
          box-sizing: border-box;
          .banner {
            width: pxToRem(1051);
            height: pxToRem(1019);
          }
        }
        .count-down {
          position: absolute;
          left: 105rpx;
          top: 20rpx;
          width: 300rpx;
          height: 100rpx;
          line-height: 110rpx;
          padding-left: 10rpx;
          font-size: pxToRem(42);
          color: #FF7200;
          background-color: #fff;
        }
      }
    }
    .menu-list {
      display: flex;
      align-items: center;
      @include middle-center-x();
      top: pxToRem(1554-390);
      width: pxToRem(1075);
      height: pxToRem(355);
      background-color: #fff;
      border-radius: pxToRem(30);
      .menu {
        position: relative;
        flex: 1;
        margin-bottom: pxToRem(30);
        border-right: pxToRem(3) solid #BFBFBF;
        &:last-child {
          border-right: none;
        }
        .icon {
          display: block;
          margin-left: auto;
          margin-right: auto;
          width: pxToRem(164);
          height: pxToRem(204);
        }
        .menu-title {
          @include middle-center-x();
          bottom: pxToRem(-65);
          font-size: pxToRem(42);
          color: #FF7200;
        }
      }
    }
    .link-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      @include middle-center-x();
      top: pxToRem(1930-390);
      width: pxToRem(1075);
      height: pxToRem(230);
      background-color: #fff;
      border-radius: pxToRem(30);
      .icon {
        display: block;
        width: pxToRem(114);
        height: pxToRem(53);
      }
      .title {
        font-size: pxToRem(42);
        color: #010101;
      }
    }
  }

  .iphoneX {
    .menu-list {
      top: pxToRem(1350);
    }
    .link-wrap {
      top: pxToRem(1750);
    }
  }
</style>
<template>
  <div class="container" :class="isIphoneX ? 'iphoneX':''">
    <img class="bg-img" src="/static/img/index/bg.jpg">
    <div v-show="showBanner" class="banner-list-wrap">
      <swiper class="banner-list" @change="changeIndex" :current="showIndex" :circular="true" :autoplay="false">
        <swiper-item class="banner-wrap" @click="toDetail(0)">
          <div class="body"><img class="banner" :src="homeImg"></div>
        </swiper-item>
        <swiper-item class="banner-wrap" @click="toDetail(1)">
          <div class="body"><img class="banner" :src="cartImg"></div>
        </swiper-item>
        <swiper-item class="banner-wrap" @click="toDetail(2)">
          <div class="body">
            <img class="banner" :src="timeImg">
            <div class="count-down">{{countSeckillTime}}  </div>
          </div>
        </swiper-item>
      </swiper>
      <img v-if="showIndex == 0" class="border left" src="/static/img/index/border.png">
      <img v-if="showIndex == 1" class="border center" src="/static/img/index/border.png">
      <img v-if="showIndex == 2" class="border right" src="/static/img/index/border.png">
    </div>
    <ul class="menu-list">
      <li class="menu" @click="show(0)">
        <img class="icon" v-if="showIndex == 0" mode="aspectFit" src="/static/img/index/home.png">
        <img class="icon" v-else mode="aspectFit" src="/static/img/index/home-disabled.png">
        <!--<div class="menu-title">今日好物</div>-->
      </li>
      <li class="menu" @click="show(1)">
        <img class="icon" v-if="showIndex == 1" mode="aspectFit" src="/static/img/index/cart.png">
        <img class="icon" v-else mode="aspectFit" src="/static/img/index/cart-disabled.png">
        <div class="menu-title">{{countCartTime}}</div>
      </li>
      <li class="menu" @click="show(2)">
        <img class="icon" v-if="showIndex == 2" mode="aspectFit" src="/static/img/index/time.png">
        <img class="icon" v-else mode="aspectFit" src="/static/img/index/time-disabled.png">
        <div class="menu-title">{{countSeckillTime}}</div>
      </li>
    </ul>
    <!--<input type="text" v-model="mac"  class="form-ssid" placeholder="输入mac"/>-->
    <!--<div class="btn-test" @click="bindMac">绑定</div>-->
    <div class="link-wrap" @click="toLink">
      <img class="icon" src="/static/img/index/link.png">
      <div class="title">链接智能设备</div>
    </div>
  </div>
</template>

<script>
  import md5 from 'md5'
  import { APP_SECRET, PRODUCT_KEY } from '../../config'

  export default {
    data() {
      return {
        isIphoneX: /iPhone X/.test(App.systemInfo.model),
        isIos: /iOS/.test(App.systemInfo.system),
        height: 750,
        showType: 'center',
        showBanner: false,
        showIndex: -1,
        mac: '',
        homeImg: 'https://image.watsons.com.cn//upload/5cb8e2d0.jpg',
        cartImg: 'https://image.watsons.com.cn//upload/4aabf9cd.jpg',
        timeImg: 'https://image.watsons.com.cn//upload/7c5feaf3.png',
        dataList: [],
        cartTime: null,
        countCartTime: '',
        seckillTime: null,
        countSeckillTime: ''
      }
    },
    components: {},
    methods: {
      toDetail(index) {
        if (this.dataList.length > index) {
          const link = this.dataList[ index ].jumpUrl;
          if (/^http/.test(link)) {
            link && wx.navigateTo({
              url: '/pages/webview/main?link=' + encodeURIComponent(link)
            })
          } else {
            wx.navigateToMiniProgram({
              appId: 'wx9feb581b55a324ff',
              path: link,
              envVersion: 'release'
            })
          }
        }
      },
      async bindMac(mac) {
        const timestamp = parseInt(Date.now() / 1000);
        const result = await wx.request({
          url: '/app/bind_mac',
          method: 'POST',
          data: {
            product_key: PRODUCT_KEY,
            mac: mac,
          },
          header: {
            'X-Gizwits-User-token': App.userInfo.token,
            'X-Gizwits-Timestamp': timestamp,
            'X-Gizwits-Signature': md5(APP_SECRET + timestamp).toLowerCase(),
          },
        })
        if (result.did) {
          wx.navigateTo({ url: '/pages/device-list/main' })
        } else {
          wx.showToast({
            title: result.error_message,
            icon: 'none'
          })
        }
      },
      changeIndex(e) {
        this.showIndex = e.mp.detail.current;
      },
      show(index) {
        if (this.showBanner && this.showIndex === index) {
          this.showBanner = false;
          this.showIndex = -1;
        } else {
          this.showBanner = true;
          this.showIndex = index;
        }
      },
      async toLink() {
        wx.showLoading({ title: '正在加载...', mask: false });
        if (!App.userInfo) {
          await App.fetchLogin();
        }
        const deviceListResult = await wx.request({
          url: '/app/bindings',
          data: {
            show_disabled: 0,
            limit: 40,
            skip: 0,
          },
          header: {
            'X-Gizwits-User-token': App.userInfo.token,
          }
        })
        //this.bindMac('f0fe6bf0d6ea')
        wx.hideLoading();
        App.devices = deviceListResult.devices;
        if (App.devices && App.devices.length) {
          wx.navigateTo({ url: '/pages/device-list/main' })
        } else {
          wx.navigateTo({ url: '/pages/network/main' })
        }
      },
      async loadData() {
        const result = await wx.request({
          url: 'https://ap.granwin.com/fr/images/',
        })
        this.dataList = result || [];
        if (result) {
          if (result.length > 0) {
            this.homeImg = result[ 0 ].fileName;
          }
          if (result.length > 1) {
            this.cartImg = result[ 1 ].fileName;
            this.cartTime = new Date(this.isIos ? result[ 1 ].overTime.replace(/-/g, '/') : result[ 1 ].overTime);
          }
          if (result.length > 2) {
            this.timeImg = result[ 2 ].fileName;
            this.seckillTime = new Date(this.isIos ? result[ 2 ].overTime.replace(/-/g, '/') : result[ 2 ].overTime);
          }
        }
      }
    },
    async onShow() {
      await this.loadData();
      setInterval(() => {
        if (this.cartTime && this.cartTime.getTime() > Date.now()) {
          const diffTime = parseInt((this.cartTime.getTime() - Date.now()) / 1000);
          let hours = parseInt(diffTime / 60 / 60);
          hours = hours < 10 ? `0${hours}` : hours;
          let minutes = parseInt(diffTime / 60) % 60;
          minutes = minutes < 10 ? `0${minutes}` : minutes;
          let seconds = diffTime % 60;
          seconds = seconds < 10 ? `0${seconds}` : seconds;
          this.countCartTime = `${hours}:${minutes}:${seconds}`;
        }
        if (this.seckillTime && this.seckillTime.getTime() > Date.now()) {
          const diffTime = parseInt((this.seckillTime.getTime() - Date.now()) / 1000);
          let hours = parseInt(diffTime / 60 / 60);
          hours = hours < 10 ? `0${hours}` : hours;
          let minutes = parseInt(diffTime / 60) % 60;
          minutes = minutes < 10 ? `0${minutes}` : minutes;
          let seconds = diffTime % 60;
          seconds = seconds < 10 ? `0${seconds}` : seconds;
          this.countSeckillTime = `${hours}:${minutes}:${seconds}`;
        }
      }, 1000)
      wx.loadFontFace({
        family: 'PingFang',
        source: 'url("https://ap.granwin.com/images/ph.ttf")',
        success: function (res) {
          console.log(res) //  loaded
        },
        fail: function (res) {
          console.log(res) //  error
        },
      })
    },
  }
</script>
